<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />

    <!-- General tags -->
    <meta
      name="description"
      content="A directory of public libraries that you can easily add to Excalidraw."
    />
    <meta name="image" content="og-image.png" />

    <!-- OpenGraph tags -->
    <meta property="og:url" content="https://libraries.excalidraw.com" />
    <meta property="og:site_name" content="Excalidraw" />
    <meta property="og:type" content="website" />
    <meta
      property="og:title"
      name="twitter:title"
      content="Excalidraw Libraries"
    />
    <meta
      property="og:description"
      name="twitter:description"
      content="A directory of public libraries that you can easily add to Excalidraw."
    />

    <!-- OG tags require an absolute url for images -->
    <meta
      property="og:image"
      name="twitter:image"
      content="https://excalidraw.com/og-image.png"
    />
    <meta
      property="og:image:secure_url"
      name="twitter:image"
      content="https://excalidraw.com/og-image.png"
    />
    <meta property="og:image:width" content="1280" />
    <meta property="og:image:height" content="669" />
    <meta property="og:image:alt" content="Excalidraw logo with byline." />

    <!-- Twitter Card tags -->
    <meta name="twitter:card" content="summary_large_image" />
    <title>Excalidraw Libraries</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/open-color/1.7.0/open-color.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/normalize.css/normalize.min.css"
    />
    <link rel="stylesheet" href="style.css" />
    <link rel="icon" href="favicon.ico" />

    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=UA-387204-13"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());
      gtag("config", "UA-387204-13");
      window.trackEvent = function (category, name, label, value) {
        window.gtag("event", name, {
          event_category: category,
          event_label: label,
          value,
        });
      };
    </script>
  </head>

  <body>
    <nav>
      <div id="theme">
        <button id="dark" class="icon option">
          <svg
            width="512"
            height="512"
            className="rtl-mirror"
            viewBox="0 0 512 512"
          >
            <path
              fill="currentColor"
              d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"
            ></path>
          </svg>
        </button>
        <button id="light" class="icon option is-hidden">
          <svg
            width="512"
            height="512"
            className="rtl-mirror"
            viewBox="0 0 512 512"
          >
            <path
              fill="currentColor"
              d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z"
            ></path>
          </svg>
        </button>
      </div>
    </nav>
    <div class="content">
      <header>
        <h1>Excalidraw Libraries</h1>
        <p class="lead">
          A directory of public libraries that you can easily add to
          <a href="https://excalidraw.com">Excalidraw</a>.
        </p>
        <p>
          Follow the
          <a
            href="https://github.com/excalidraw/excalidraw-libs#create-your-own-library"
            >instructions</a
          >
          if you want to <strong>add your own library</strong> into this list.
        </p>
        <p class="small">
          All the following libraries are under
          <a
            href="https://github.com/excalidraw/excalidraw-libs/blob/main/LICENSE"
            target="_license"
            >MIT License</a
          >.
        </p>
        <div id="sort">
          <span id="sort-contents">Sort By </span>
          <span id="sort-template" class="option">{label}</span>
        </div>
        <p class="search-container">
          <input
            type="search"
            id="search-input"
            placeholder="Search..."
            autocorrect="off"
          />
          <span class="search-tip"
            >(tip: you can type anywhere to start searching)</span
          >
        </p>
      </header>
      <main>
        <div class="library" id="template">
          <img data-src="{preview}" alt="{name}" class="lazy" />
          <h2>{name} <a aria-label="Anchor" href="#{libraryId}">#</a></h2>
          <p class="authors">{authors}</p>
          <p class="downloads">
            <span title="Downloads ({week} this week)">⬇️ {total}</span>
          </p>
          <div class="dates">
            <p class="created">Created: {created}</p>
            <p class="updated">Updated: {updated}</p>
          </div>
          <p>{description}</p>
          <div class="actions">
            <a
              class="btn primary install-library"
              href="{addToLib}"
              target="{target}"
              onclick="trackEvent('library', 'import', '{libraryId}')"
              >➡️ Add to {appName}</a
            >
            <a
              class="btn"
              href="{source}"
              onclick="trackEvent('library', 'download', '{libraryId}')"
              >⬇️ Download</a
            >
          </div>
        </div>
      </main>
      <footer>
        <div id="footer">
          © {currentYear} <a href="https://excalidraw.com">Excalidraw</a> •
          <a href="https://github.com/excalidraw/excalidraw-libraries"
            >Source Code</a
          >
        </div>
      </footer>
    </div>
    <script src="script.js"></script>
  </body>
</html>
